<template>
  <div id="map"></div>
<!--  <div ref="popupRef" class="popup">-->
<!--    <span class="item" @click="handleClick">我是自定义弹窗</span>-->
<!--  </div>-->
</template>

<script lang="ts" setup>
// @ts-ignore
import { MapboxGl, LayerManager, SwitchStyle } from "../utils/mapbox/index.js";
import {onMounted, ref} from "vue";

let popupRef = ref()

onMounted(() => {
  (window as any).MapBox = new MapboxGl(
      {
        // style: 'mapbox://styles/mapbox/streets-v12',
        // center: [-122.486052, 37.830348],
        // zoom: 14
        style: 'mapbox://styles/mapbox/light-v11',
        zoom: 13,
        center: [-122.447303, 37.753574]
      }
  );
  (window as any).LayerManager = new LayerManager((window as any).MapBox.map);
  const switchStyle = new SwitchStyle((window as any).MapBox.map);
  addVectorTile()
  // (window as any).LayerManager.addGeoJsonLayer('linear');

  // 中心点
  // (window as any).MapBox.setCenter([-122.483696, 37.833818]);
  // 绘制区域 marker
  // setMarker()
  // setLayer()

  // 定位区域
  // fitBounds()
  //
  // setPopup()
})

// marker
const setMarker = () => {
  // (window as any).MapBox.setCenter([-68.137343, 45.137451])
  //   (window as any).MapBox.setZoom(5);
  const flyMarker = (window as any).MapBox.flyTo([-68.137343, 45.137451], {},{ 'key': 'marker_flyToMarker', 'layerManager': (window as any).LayerManager});
}

// 添加矢量瓦片
const addVectorTile = () => {
  (window as any).LayerManager.addVectorLayer('fill_terrain-data',
      {
        type: 'vector',
        url: 'mapbox://mapbox.mapbox-terrain-v2'
      },
      {
        'type': 'fill',
        'source-layer': 'hillshade',
        'line-join': 'round',
        'line-cap': 'round',
        'line-color': '#ff69b4',
        'line-width': 1
      });
  (window as any).MapBox.addEventOnMap('click','fill_terrain-data', getFeature);
}

const getFeature = (properties: any, lngLat: any) => {
  console.log('回调函数接受参数', properties, lngLat)
}

// 绘制图层
const setLayer = () => {
  const sourceOption = {
    'data': {
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        'coordinates': [
          [
            [-67.13734, 45.13745],
            [-66.96466, 44.8097],
            [-68.03252, 44.3252],
            [-69.06, 43.98],
            [-70.11617, 43.68405],
            [-70.64573, 43.09008],
            [-70.75102, 43.08003],
            [-70.79761, 43.21973],
            [-70.98176, 43.36789],
            [-70.94416, 43.46633],
            [-71.08482, 45.30524],
            [-70.66002, 45.46022],
            [-70.30495, 45.91479],
            [-70.00014, 46.69317],
            [-69.23708, 47.44777],
            [-68.90478, 47.18479],
            [-68.2343, 47.35462],
            [-67.79035, 47.06624],
            [-67.79141, 45.70258],
            [-67.13734, 45.13745]
          ]
        ]
      }
    }
  }
  const layerOption = {
    type: 'fill',
    outlineOption: {
      id: 'outlineOne',
      'line-color': '#0c0000',
      'line-width': 4
    }
  };
  (window as any).LayerManager.addGeoJsonLayer('fill_', sourceOption, layerOption)
}

// 定位区域
const fitBounds = () => {
  const geojson = {
    'type': 'FeatureCollection',
    'features': [
      {
        'type': 'Feature',
        'geometry': {
          'type': 'LineString',
          'properties': {},
          'coordinates': [
            [-77.0366048812866, 38.89873175227713],
            [-77.03364372253417, 38.89876515143842],
            [-77.03364372253417, 38.89549195896866],
            [-77.02982425689697, 38.89549195896866],
            [-77.02400922775269, 38.89387200688839],
            [-77.01519012451172, 38.891416957534204],
            [-77.01521158218382, 38.892068305429156],
            [-77.00813055038452, 38.892051604275686],
            [-77.00832366943358, 38.89143365883688],
            [-77.00818419456482, 38.89082405874451],
            [-77.00815200805664, 38.88989712255097]
          ]
        }
      }
    ]
  };

  let source = {
    data: geojson
  };

  (window as any).LayerManager.addGeoJsonLayer('line_LineString', source);

// Map.fitBounds([[-77.0214, 38.897], [-76.0214, 37.897]])
  (window as any).MapBox.fitBounds(geojson)
}

// popup

const setPopup =() => {
  (window as any).LayerManager.addMarkerWithPopup([-77.0214, 38.897], 'marker_test', {}, { dom: popupRef.value});
}

const handleClick = () => {
  alert('点击了弹窗')
}

</script>

<style lang="scss" scoped>
#map {
  height: 100%;
}
.popup {
  .item {
    color: black;
  }
}
</style>
